<template>
  <div>



    <div>
      <div class="top1">
         
      </div>
      <div class="top">
     <span class="shop_name">OMINI官方旗舰店</span> 
       <p>店铺总宝贝数量：100 &nbsp;&nbsp;&nbsp;&nbsp; 店长：张晓伟</p>
       <div>
         <div class="find" @click="find">搜索</div>
         <span class="top_api">
           
    
              <!-- <span class="top_api1" >首页</span>  <span class="top_api2">商品</span> -->
         </span>
        
        
        </div>
         </div>


          <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="首页" name="first">
       <el-carousel :interval="4000" arrow="always" height="400px" >
    <el-carousel-item v-for="(item, index) in img" :key="index">
            <h3><img :src="item.images" alt="" width="450px"></h3>
    </el-carousel-item>
        </el-carousel>
        
        <div>
          <center>
         <p class="coucon">优惠券<br>coucon</p>  
          </center>
          <div class="coupon_border" v-for="(item, index) in coucon" :key="index">
            <span class="coupon_border_price_span">
             <span class="renmingbi">￥</span> <span class="coupon_border_price">{{item.coupon_price}}</span>
          </span>  
          <span class="coupon_border_time"><span> 优惠券</span><br>满{{item.coupon_mprice}}使用<br>使用时间：1998.9.7</span>
           <div class="lingqu">
             <center>
             点击领取>>>
             </center>
           </div>


          </div>
        
        </div>

        <div>
           <center>
         <p class="coucon">分类<br>coucon</p>  
          </center>
          <div v-for="(item, index) in type" :key="index" class="type " :style="{ backgroundImage: 'url(' + item.type_photo+ ')', backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%'}" >
               <div class="tm">
                   {{item.type_name}}
               </div>
                
          </div>
          <div class="baby_tui">
            <center>
         <p class="coucon_baby">店铺推荐<br>RECOMMENDATION</p>  
          </center>
              <div class="shop_baby" v-for="(item, index) in shop_baby" :key="index">
                    <img :src="item.s_baby_photo" alt="" class="shop_baby_images"> 
                    <p>&nbsp;&nbsp;{{item.s_baby_name}}</p>
                    <p>&nbsp;&nbsp;￥{{item.s_baby_price}}</p>
              </div>
              <center>
              <p>没有更多商品了。。。</p>
              </center>
          </div>
        </div>
      
    </el-tab-pane>
    <el-tab-pane label="商品" name="second">
      <div class="order_by">
           <div class="order_by_price" @click="order_by_price(status)">
             <div class="order_by_price_text">
             按价钱排序
             </div>
             <div class="order_by_price_images_sheng" >
             <img src="http://py9lewv6q.bkt.clouddn.com/images_1571292712升序.png" alt="" width="20">
            </div>
           <div class="order_by_price_images_jiang"  >
             <img src="http://py9lewv6q.bkt.clouddn.com/images_1571292872降序.png" alt="" width="20">
            </div>   
          </div>
      </div>

    <div class="baby_tui">
              <div class="shop_baby" v-for="(item, index) in shop_baby" :key="index">
                    <img :src="item.s_baby_photo" alt="" class="shop_baby_images"> 
                    <p>&nbsp;&nbsp;{{item.s_baby_name}}</p>
                    <p>&nbsp;&nbsp;￥{{item.s_baby_price}}</p>
              </div>
              <center>
              <p>没有更多商品了。。。</p>
              </center>
          </div>


    </el-tab-pane>
    
  </el-tabs>
    <div class="bottom">
      <center>
       
              <div class="bottom_menu">
                <p>
                  <img src="http://py9lewv6q.bkt.clouddn.com/images_1571280354全部选中.png" alt="" class="type_all">
                  </p>
               <p>全部</p> 
                </div>
              <div class="bottom_menu" @click="shop_type">
                <p><img src="http://py9lewv6q.bkt.clouddn.com/images_1571056693分类未选中.png" alt=""></p>
               <p>分类</p> 
              </div>
              <div class="bottom_menu">
                <p><img src="http://py9lewv6q.bkt.clouddn.com/images_1571142824客服未选中.png" alt=""></p>
               <p>客服</p> 
              </div>
              <div class="bottom_menu4">
                <p><img src="http://py9lewv6q.bkt.clouddn.com/images_1571142856关注未选中.png" alt=""></p>
               <p>关注</p> 
              </div>
</center>
  </div>
  <div class="bottom1">
    

  </div>









        


    
    </div>
     
  </div>

</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      img:'',
      coucon:'',
       activeName: 'first',
       type:'',
       shop_baby:'',
       status:1
     
    }
  },
  created(){
    
    if(this.$route.params.statu=="second"){
        this.activeName=this.$route.params.statu;
       
    }else{
      status="first";
    
    }
     
    let that=this
    //轮播图
    this.$axios({
      url:'http://www.shop.com/index.php/api/user/shop_photo?shop_id=1',
      
    })
    .then(function(res){
        that.img=res.data
    })
    //优惠券
    this.$axios({
      url:'http://www.shop.com/index.php/api/user/shop_coupon?shop_id=1',
      
    })
    .then(function(res){
        that.coucon=res.data
    })
    //分类
     this.$axios({
      url:'http://www.shop.com/index.php/api/user/shop_type?shop_id=1',
      
    })
    .then(function(res){
      console.log(res)
        that.type=res.data
    })
    //店铺推荐
     this.$axios({
      url:'http://www.shop.com/index.php/api/user/redisshow',
      params:{
        shop_id:1
      }
      
    })
    .then(function(res){
      console.log(123)
        that.shop_baby=res.data
    })
  },
  methods: {
    
    
    handleClick(tab, event) {
        console.log(tab, event);
      },
      find(){
         this.$router.push({
               name:'shop_find'
         })
      },
      shop_type(){
          this.$router.push({
               name:'shop_type'
         })
      },
      order_by_price(status){
        let that=this
            this.$axios({
          url:'http://localhost/shixunxm/myshop/shop/shop_back_laravel/public/index.php/api/user/shop_price_shop?shop_id=1&&status='+status,
          
        })
        .then(function(res){
            console.log(res)
            that.shop_baby=res.data
            if(that.status==1){
              that.status=2
            }else{
              that.status=1
            }
        })
      }
    
  }
  
}
</script>
<style lang="">
.order_by_price_text{
   float: left;
   margin-left: 20px;
   
}
.order_by_price_images_sheng{
    float: left;
    position: relative;
    top: -6px;
}
.order_by_price_images_jiang{
  float: left;
   position: relative;
    left: -20px;
    top:5px;
}
.order_by_price{
  float: left;
  width: 140px;
  height: 40px;
  background: rgb(238, 209, 209);
  border-radius: 20px;
  margin-top: 5px;
  line-height: 40px;

}
.order_by{
  width: 100%;
  height: 50px;
  background-color: #fff;
}
.coucon_baby{
  padding-top: 10px;
  color: rgb(88, 84, 84);
}
.baby_tui{
  width: 100%;
  background-color: rgb(148, 139, 130)
}
.shop_baby{
  width: 200px;
  height: 300px;
  background-color:rgb(225, 225, 228);
  display: inline-block;
  margin-left:14px;
  border-radius: 5px;
  margin-top: 10px;
}
.shop_baby_images{
  border-radius: 5px;
}
.bottom{
  width: 100%;
  height: 80px;
  background: #fff;
  position:fixed;bottom:0px;left:0;
}
.bottom_menu{
  width: 110px;
  height: 80px;
  display: inline-block;
  border-right:2px solid rgb(205, 205, 211); 
  

}
.bottom_menu4{
  width: 110px;
  height: 80px;
  display: inline-block;
  
  

}
.bottom1{
   width: 100%;
  height: 75px;
  background: #fff;
}
.lingqu{
 float: right;;
  width: 130px;
  height: 42px;
  border: 1px solid black;
  margin-top: 25px;
  margin-right:20px;
  border-radius: 20px;
  line-height: 40px;
  background: #fff; 
  font-family: "黑体";
  color: rgb(192, 95, 95);
 

}
  .shop_name{
    font-size: 20px;
    font-weight: bolder;
  }
  html{
   background:rgb(238, 234, 234);
  }
  .top{
    z-index: 99999;
    width: 100%;
    height:120px;
    margin-bottom: 15px;
    margin-left: 5px;
    position:fixed;top:0px;left:0;
    background:rgb(238, 234, 234);
  }
  .top_api{
    /* float: right; */
    /* margin-right: 300px; */
    line-height: 40px;

  }
  .top_api1{
       float: left;
    display: inline-block;
    width: 100px;
    height: 40px;
    text-align: center;
 
  }
  .top_api2{
     float: left;
     display: inline-block;
    width: 100px;
    height: 40px;
     text-align: center;
  }
  .top1{
    width: 100%;
    height:100px;
    margin-bottom: 15px;
  }
  .find{
    float: left;
    display:inline-block;
    width: 60px;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
    border:1px solid rgb(240, 135, 135);
    border-radius: 30px;
    color: rgb(240, 135, 135);
  }



    .el-carousel__item h3 {
    
    /* opacity: 0.55; */
    line-height: 300px;
    margin: 0;
    margin-top: 10px;
  }
  .coucon{
    font-size: 20px;
    color: rgb(6, 66, 6);
    
    
  
  }
  .coupon_border{
      width: 420px;
      height: 100px;
      border: 2px solid rgb(231, 231, 96);
      margin-left:10px; 
      margin-top:20px; 
      border-radius: 20px;
         background-image: linear-gradient(to right, red , blue);
  }
  .coupon_border_price{
    font-size: 80px;  
    font-weight: bold;
    color: #fff;
  }
  .renmingbi{
    font-size: 30px;  
    font-weight: bold;
    color: #fff;
  }
  .coupon_border_price_span{
    margin-left: 10px;
    line-height: 90px;
    float: left;
  }
  .coupon_border_time{
    float: left;
    
   margin-top: 15px;
   color: #fff;
   font-size: 12px;
   font-weight: inherit;
  }
  .coupon_border_time span{
    font-weight: bolder;
    font-size: 20px;
    
  }
  .type{
    width: 200px;
    height: 150px;
    background: red;
    display: inline-block;
    margin-left: 20px;
    margin-top: 10px;
    border-radius: 20px;
  }
  .tm{
    width: 100%;
    height: 40px;
    background: rgba(248, 244, 246, 0.4);
    margin-top: 110px;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
  }
  



  
  
</style>